<template>
  <div class="login">
    <NavBar title="登录" back/>
    <div class="logo tb-logo"></div>
    <div class="login-form">
      <div class="login-boder">
        <div class="login-icon login-phone"></div>
        <input class="login-input" type="number" pattern="[0-9]*" maxlenght="11" @change="checkTel" v-model="loginForm.cellphone" id="cellphone" placeholder="手机号码"/>
      </div>
      <!--End用户名输入框-->
      <div class="login-boder">
        <div class="login-icon login-password"></div>
        <input class="login-input login-pwd" :type="type" @change="checkPassword" v-model="loginForm.password" id="password" placeholder="登录密码"/>
        <div class="login-hide" :class="{'login-show':display}" @click="handelShow"></div>
      </div>
      <div class="login-btn" @click="login">立即登录</div>
    </div>
    <div class="login-txt"><router-link to="/regist">立即注册</router-link> | <router-link to="/password">忘记密码？</router-link></div>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import { Toast } from 'vant'
export default {
  name: 'login',
  data () {
    return {
      type: 'password',
      display: false,
      loginForm: {
        cellphone: null,
        password: null
      }
    }
  },
  components: {
    NavBar
  },
  methods: {
    checkTel: function () {
      let tel = this.loginForm.cellphone
      if (tel === '') {
        Toast('手机号码不能为空')
      } else {
        let reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])[0-9]{8}$/
        if (!reg.test(tel)) {
          Toast('请输入格式正确的电话号码')
        }
      }
    },
    checkPassword: function () {
      let password = this.loginForm.password
      if (password.length < 6 || password.length > 10) {
        Toast('密码长度须在6-10位之间')
      }
    },
    handelShow: function () {
      if (!this.display) {
        this.type = 'text'
      } else {
        this.type = 'password'
      }
      this.display = !this.display
    },
    login: function () {
      let tel = this.loginForm.cellphone
      let password = this.loginForm.password
      if (tel === '') {
        Toast('手机号码不能为空')
        return false
      } else {
        let reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])[0-9]{8}$/
        if (!reg.test(tel)) {
          Toast('请输入格式正确的电话号码')
          return false
        }
      }
      if (password.length < 6 || password.length > 10) {
        Toast('密码长度须在6-10位之间')
        return false
      }
      let loading = Toast.loading({
        duration: 0,
        mask: false,
        message: '登录中...'
      })
      this.$store.dispatch('Login', this.loginForm).then(() => {
        loading.clear()
        this.$router.push({ path: this.$route.query.redirect || '/user' })
      })
    }
  }
}
</script>
<style>
  .login {
    position: absolute;
    height: 100%!important;
    background: #fff;
  }
  .logo {
    width: 60px;
    height: 60px;
    background: url('../../assets/logo.png') no-repeat;
    background-size: 60px;
    margin: 40px auto;
  }

  .login-inp label {
    width: 4em;
    text-align: center;
    display: inline-block;
    color: #1ABC9C;
    font-size: 14px;
  }

  .login-txt {
    text-align: center;
    color: #1ABC9C;
    font-size: 12px;
    margin-top: 30px;
  }

  .login-txt a {
    color: #1ABC9C;
    padding: 0 5px;
  }

  .login-boder {
    width: 80%;
    height: 35px!important;
    margin-top: 6px;
    margin-left: 10%;
    text-align: center;
    border-bottom: 1px solid #1ABC9C;
  }

  .login-icon {
    height: 28px;
    line-height: 28px;
    width: 10%;
    float: left;
    text-align: right;
  }

  .login-phone {
    background-image: url('../../../static/images/login/cellphone.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 5px 7px;
  }

  .login-password {
    background-image: url('../../../static/images/login/password.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 5px 7px;
  }

  .login-input {
    width: 80%;
    float: left;
    margin-left: 6px;
    height: 28px;
    border: 0px;
    color: #333333;
    font-size: 14px;
    outline:none;
    cursor: pointer;
    background: none;
  }

  .login-pwd {
    width: 70%;
  }

  .login-hide {
    height: 28px;
    line-height: 28px;
    width: 10%;
    float: right;
    text-align: right;
    background-image: url('../../../static/images/login/hide.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 5px 10px;
  }

  .login-show {
    background-image: url('../../../static/images/login/show.png');
  }

  .login-input::-webkit-input-placeholder {
    color: #cccccc;
    font-size: 12px;
  }

  .login-btn {
    width: 80%;
    height: 40px;
    line-height: 40px;
    margin-left: 10%;
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    background-color: #1ABC9C;
  }

</style>
